<template>
  <div class="mui-content mh-container pb pd bg-w">
    <mh-header headName="已报名网友"> </mh-header>
    <div class="list-wrap bg-w">
      <ul class="friend-list">
        <li class="friend-item flex" v-for="item in friends" :key="item.id">
          <div class="item-lt mh-pd">
            <div class="pic-box">
              <img :src="item.pic" alt="头像">
            </div>
          </div>
          <div class="item-rt">
            <h4 v-text="item.name">用户名</h4>
            <p>{{item.age}}岁|{{item.city}}|{{item.edu}}</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header'
  export default {
    name: "already-regist",
    data () {
      return {
        friends: [
          {
            id: '1',
            pic: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1412847876,2340663577&fm=11&gp=0.jpg',
            name: '漳卅',
            age: 23,
            city: '北京东城区',
            edu: '本科'
          },
          {
            id: '2',
            pic: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1412847876,2340663577&fm=11&gp=0.jpg',
            name: '漳卅',
            age: 23,
            city: '北京东城区',
            edu: '本科'
          },
          {
            id: '3',
            pic: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1412847876,2340663577&fm=11&gp=0.jpg',
            name: '漳卅',
            age: 23,
            city: '北京东城区',
            edu: '本科'
          }
        ]
      }
    },
    components: {
      MhHeader
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";
  .pic-box {@include mh-avatar-box(3.5rem, 3.5rem);}
  .item-rt {flex: 1;}
  .item-rt {
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-bottom: .05rem solid #eeeeee;
    h4 {margin-bottom: .7rem;@include sc(1.5rem, #333);}
    p {@include sc(1.2rem, #999);}
  }
</style>
